<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
		<title>蒲江现代农业产业园综合服务平台</title>
		<link rel="stylesheet/less" type="text/css" href="./css/less/style.less">
		<style>
			body .demo-class {
				background: none;
			}
			body .demo-class .layui-layer-ico{
				background: url(img/x.png) no-repeat;
			}
			body .demo-class .layui-layer-ico:hover{
				background: url(img/x.png) no-repeat;
			}
			body .demo-class .layui-layer-setwin .layui-layer-close2{
			        right: -7px;
    				top: 28px;
			}
		</style>
	</head>

	<body class="color_f scroll">

		<div class="layui-row">
			<div class="header">
				<a href="./produce.html" class="swl fl cp ft12">
					农业生产
				</a>
				<a href="./operate.html" class="swl fl cp ft12">
					产业经营
				</a>
				<h1 class="fl bt ft28"><a class="color_f" href="./index.html">蒲江现代农业产业园综合服务平台</a></h1>
				<a href="./manage.html" class="swr fl cp ft12">
					综合管理
				</a>
				<a href="./service.html" class="swr fl cp ft12">
					应用服务
				</a>
			</div>
		</div>

		<div class="layui-row">
			<h1>&nbsp;&nbsp;农产品经营主体信息<i class="fa fa-angle-double-right fa-fw fa-setCol"></i></h1>
		</div>

		<div class="layui-row">
			<div class="layui-fluid">
				<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
					<!-- 选项卡 -->
					<ul class="layui-tab-title setTab" id="tabCont"></ul>
					<div class="layui-tab-content">
						<!-- 选项卡内容0 -->
						<div class="layui-tab-item layui-show">
							<div class="layui-row">
								<ul class="listBox" id="content0"></ul>
							</div>
							<div class="layui-row">
								<div class="page-row">
									<div id="pagenation0"></div>
								</div>
							</div>
						</div>

						<!-- 选项卡内容1 -->
						<div class="layui-tab-item">
							<div class="layui-row">
								<ul class="listBox" id="content1"></ul>
							</div>
							<div class="layui-row">
								<div class="page-row">
									<div id="pagenation1"></div>
								</div>
							</div>
						</div>

						<!-- 选项卡内容2 -->
						<div class="layui-tab-item">
							<div class="layui-row">
								<ul class="listBox" id="content2"></ul>
							</div>
							<div class="layui-row">
								<div class="page-row">
									<div id="pagenation2"></div>
								</div>
							</div>
						</div>

						<!-- 选项卡内容3 -->
						<div class="layui-tab-item">
							<div class="layui-row">
								<ul class="listBox" id="content3"></ul>
							</div>
							<div class="layui-row">
								<div class="page-row">
									<div id="pagenation3"></div>
								</div>
							</div>
						</div>

						<!-- 选项卡内容4 -->
						<div class="layui-tab-item">
							<div class="layui-row">
								<ul class="listBox" id="content4"></ul>
							</div>
							<div class="layui-row">
								<div class="page-row">
									<div id="pagenation4"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>
	<div id="std" style="display:none"></div>
	<script type="text/html" id="tabList">
		{{# layui.each(d.tabs, (index, item) => { }}
		<li class="{{item.stats?'layui-this':''}}">{{item.name}}</li>
		{{# }); }}
	</script>
	<script type="text/html" id="tmpList">
		{{# layui.each(d.list, (index, item) => { }}
		<li class="showbox" data-method="notice" data-id="{{item.id}}">
			<span class="layui-col-md10"><span class="order">{{item.serial+1}}.</span>{{item.title}}</span>
			<span class="layui-col-md1 layui-col-lg-offset1"><i class="fa fa-chevron-right fa-fw"></i></span>
		</li>
		{{# }); }}
	</script>
	<script type="text/html" id="noticeBox">
		<div class="layui-card">
			<div class="layui-card-header comHead">
				<div class="layui-row mangCom">{{d.title}}</div>
				<div class="layui-row describe"><div class="layui-col-md12">{{d.describe}}</div></div>
			</div>
			<div class="layui-card-body">
				<div class="layui-row">
					<div class="layui-col-md-offset1 layui-col-md5"><span>联&nbsp;&nbsp;系&nbsp;&nbsp;人：</span>{{d.contract}}</div>
					<div class="layui-col-md6"><span>联系电话：</span>{{d.tele}}</div>
				</div>
				<div class="layui-row">
					<div class="layui-col-md-offset1 layui-col-md5"><span>主导产业：</span>{{d.industry}}</div>
					<div class="layui-col-md6"><span>基地面积：</span>{{d.area}}</div>
				</div>
				<div class="layui-row">
					<div class="layui-col-md-offset1 layui-col-md5"><span>产品产量：</span>{{d.yield}}</div>
					<div class="layui-col-md6"><span>认证时间：</span>{{d.authen}}</div>
				</div>
				<div class="layui-row">
					<div class="layui-col-md-offset1 layui-col-md5"><span>认证类型：</span>{{d.authType}}</div>
					<div class="layui-col-md6"><span>认证信息：</span>{{d.authInfo}}</div>
				</div>
			</div>
		</div>
	</script>
	<script src="https://cdn.bootcss.com/less.js/3.9.0/less.min.js"></script>
	<script src="./layui/layui.js"></script>
	<script src="./js/http.js"></script>
	<script src="./js/app.js"></script>
	<script>
		layui.use(["layer"], function() {
			var $ = layui.jquery;

			//构建模板
			var setlayTpl = function(mod, id, tpl, data) {
				layui.use([mod, "layer"], function() {
					var laytpl = layui.laytpl;
					var htmltpl = $(tpl).html()
					var view = document.getElementById(id);
					laytpl(htmltpl).render(data, function(html) {
						view.innerHTML = html;
					});
				});
			}

			//设置分页
			var setPagenation = function(mod, target, size, data, id, tpl) {
				layui.use(mod, function() {
					var laypage = layui.laypage
					laypage.render({ //动态分页
						elem: target,
						count: data.list.length,
						limit: size,
						prev: '<em><i class="fa fa-angle-double-left fa-fw"></i></em>',
                        next: '<em><i class="fa fa-angle-double-right fa-fw"></i></em>',
						jump: function(obj) {
							var thisData = data.list.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
							var pages = {
								list: thisData
							};
							setlayTpl("laytpl", id, tpl, pages)
						}
					});

				})
			}

			//动态选项卡
			var setTab = function(mod) {
				layui.use(mod, function() {});
			}

			//设置弹框
			var setElastic = function(mod, type, target, id) {
				layui.use([mod], function() {
					var layer = layui.layer
					//触发事件
					var active = {
						notice: function(othis) {
							//示范一个公告层
							layer.open({
								skin: 'demo-class',
								type: 1,
								title: false, //不显示标题栏
								closeBtn: true,
								area: '800px;',
								shade: 0.8,
								id: 'LAY_layuipro', //设定一个id，防止重复弹出
								moveType: 1, //拖拽模式，0或者1
								content: $(id)
							});
						}
					}

					$(document).on(type, target, function() {
						var othis = $(this),
							method = othis.data('method');
						active[method] ? active[method].call(this, othis) : '';
					})
				});

			}

			//获取改值所在的对象的序号
			var findDataindex = function(target, data, param) {
				var index = -1;
				$.each(data, (key, item) => {
					if(item[param] == target) {
						index = key
					}
				});
				return index
			}

			//渲染弹框模板
			var randCheckBox = function(type, target, data) {
				$(document).on(type, target, function() {
					var getId = $(this).data("id")
					var index = findDataindex(getId, data.list, "id")
					setlayTpl("laytpl", "std", "#noticeBox", data.list[index])
				});
			}

			//构建模板需要的数据模型
			var buildMode = function(json) {
				var data = {},
					count = -1;
				$.getJSON(json, function(res) {
					data.tabs = []
					data.list = []
					$.each(res.tabs, function(index, item) {
						var obj = {
							name: item.name,
							stats: item.stats
						}
						data.tabs.push(obj)
					});
					$.each(res.list, function(index, item) {
						count += 1
						var obj = {
							id: "list" + count,
							serial: count,
							describe:item.describe,
							title: item.title,
							contract: item.contract,
							tele: item.tele,
							industry: item.industry,
							area: item.area,
							yield: item.yield,
							authen: item.authen,
							authType: item.authType,
							authInfo: item.authInfo
						}
						data.list.push(obj)
					});

					randCheckBox("click", ".showbox", data)
					setlayTpl("laytpl", "tabCont", "#tabList", data)
					setPagenation("laypage", "pagenation0", 30, data, "content0", "#tmpList")
					setPagenation("laypage", "pagenation1", 30, data, "content1", "#tmpList")
					setPagenation("laypage", "pagenation2", 30, data, "content2", "#tmpList")
					setPagenation("laypage", "pagenation3", 30, data, "content3", "#tmpList")
					setPagenation("laypage", "pagenation4", 30, data, "content4", "#tmpList")
					setTab("element")
					setElastic("layer", 'click', '.showbox', '#std', "")
				})
			}

			buildMode("./data/management.json")

		})
	</script>

</html>